<template>
  <div class="startDestinationCostDialog jh" @click="
    divs = false;
  show = false;
  ">
    <div class="texs">
      <div class="container" @click.stop="opens">
        <div class="text textsss">
          {{
            locationArr.province +
            locationArr.city +
            locationArr.county +
            locationArr.address
          }}
        </div>
        <span class="icon">
          <IconFont name="rect-right"></IconFont>
          <!-- <img src="../../assets/images/icon_arrow-right.png" alt="" /> -->
        </span>
      </div>
      <div style="width: 50%; margin-left: 20px; position: relative">
        <nut-input v-model="locationArr.add" placeholder="请输入内容" @input="search"></nut-input>
        <div class="resultGive" v-if="divs" @click.stop="divs = !divs">
          <div class="rows" v-for="(item, index) in result" :key="index" @click="goAdd(item)">
            <div style="
                margin-left: 10px;
                margin-right: 10px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              " :title="item.name">
              {{ item.name }}
            </div>
            <div style="
                font-size: 12px;
                color: #c0c4cc;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              " :title="item.address">
              {{ item.address }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="
        position: fixed;
        background: #e4e7ed;
        width: 100%;
        height: auto;
        z-index: 999999;
        top: ;
      " class="tabsd" v-if="show" @click.stop="show = true">
      <nut-tabs v-model="activeName" @click="handleClick" :before-leave="beforeLeave">
        <nut-tab-pane label="省/直辖" name="1" :title="locationArr.province">
          <div class="tabTag">
            <div class="block" v-for="(item, index) in provinceList" :key="index" @click="choose('2', item)">
              {{ item.btaAllName }}
            </div>
          </div>
        </nut-tab-pane>
        <nut-tab-pane label="市" name="2" :title="locationArr.city">
          <div class="tabTag">
            <div class="block" v-for="(item, index) in provinceList" :key="index" @click="choose('3', item)">
              {{ item.btaAllName }}
            </div>
          </div>
        </nut-tab-pane>
        <nut-tab-pane label="区/县" name="3" :title="locationArr.county">
          <div class="tabTag">
            <div class="block" v-for="(item, index) in provinceList" :key="index" @click="choose('4', item)">
              {{ item.btaAllName }}
            </div>
          </div>
        </nut-tab-pane>
        <nut-tab-pane label="街道" name="4" :title="locationArr.address">
          <div class="tabTag">
            <div class="block" v-for="(item, index) in provinceList" :key="index" @click="choose('5', item)">
              {{ item.btaAllName }}
            </div>
          </div>
        </nut-tab-pane>
      </nut-tabs>
    </div>
    <div class="border" style="height: 800px">
      <div id="map" class="map-home"></div>
    </div>
    <div class="fixdBox">
      <div class="footadd">
        <div style="display: flex; width: 100%; align-items: center">
          <div style="width: 90px">详细地址</div>
          <nut-input v-model="footAdd" placeholder="请输入内容"></nut-input>
        </div>

        <!-- <el-input v-model="hourseNumber" placeholder="请完善门牌号" style="width:20%"></el-input> -->
      </div>

      <div slot="footer" class="dialog-footer" style="padding: 0rem 0.2rem">
        <nut-button round plain hairline type="info" @click="goBack" style="width: 30%">取 消</nut-button>
        <nut-button round type="info" @click="done" style="width: 65%; margin-left: 0.2rem">确 定</nut-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, reactive, ref, watch } from "vue";

import { IconFont } from "@nutui/icons-vue-taro";
import OlFeature from "ol/Feature";
import OlGeomPoint from "ol/geom/Point";
import OlLayerVector from "ol/layer/Vector";
import OlSourceVector from "ol/source/Vector";
//import OlOverlay from "ol/Overlay";
import { Translate as PointerTranslate } from "ol/interaction";
import Collection from "ol/Collection";
//import { transform, fromLonLat } from "ol/proj";
import { Map, View, Feature } from "ol";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { XYZ, Vector as VectorSource } from "ol/source";
import * as olProj from "ol/proj";
//import { Point } from "ol/geom";
import { Style, Fill, Stroke, Circle as sCircle } from "ol/style";
import { defaults, FullScreen, MousePosition, ScaleLine } from "ol/control";
//import Overlay from "ol/Overlay"; //显示要素
//import { Draw } from "ol/interaction";
import { Icon } from "ol/style";
// import axios from "axios";
import { $post, $get } from "../../@api/index";
import Taro from "@tarojs/taro";
import useAddressInfoStore from "../../store/addressbook";
const store = useAddressInfoStore();

const canMove = ref<boolean>(true);
const divs = ref<boolean>(false);
const show = ref<boolean>(false);
const input = ref("");
const provinceList = ref([]);
const openMap = ref();
const locationXy: any = ref([119.27345, 26.04769]);
const pointSource = ref();
const source = ref();
const activeName = ref("1");
const footAdd = ref("");
const result: any = ref([]);
const start = ref(0);
const isMove = ref<boolean>(true);
const locationArr = ref({
  province: "",
  city: "",
  county: "",
  address: "",
  add: "",
});
const resLoca = ref();
const address = computed(() => {
  let add =
    locationArr.value.province +
    locationArr.value.city +
    locationArr.value.county +
    locationArr.value.address +
    locationArr.value.add;

  return add;
});
watch(
  locationArr,
  (
    newValue: {
      province: string;
      city: string;
      county: string;
      address: string;
      add: string;
    },
    oldValue: {
      province: string;
      city: string;
      county: string;
      address: string;
      add: string;
    }
  ) => {
    let add =
      locationArr.value.province +
      locationArr.value.city +
      locationArr.value.county +
      locationArr.value.address +
      locationArr.value.add;
    console.log(add, "hahahahahahah");
    footAdd.value = add;
  },
  { deep: true, immediate: true }
);
onMounted(() => {
  locationArr.value.province = "";
  locationArr.value.city = "";
  locationArr.value.county = "";
  locationArr.value.address = "";
  locationArr.value.add = "";

  if (openMap.value == null) {
    // alert(1)
    setTimeout(() => {
      initMap();
      centerIcon(locationXy.value);
      setTimeout(() => {
        isMove.value = true;
        moveend();
      }, 1000);
    }, 1000);
  }
});
function initMap() {
  source.value = new XYZ({
    url: "http://222.79.63.193:8077/mapImg/1/V1/{z}/{x}/{y}.png",
  });
  openMap.value = new Map({
    target: "map",
    layers: [
      new TileLayer({
        source: source.value,
      }),
    ],
    view: new View({
      // 将福州作为地图中心
      center: olProj.fromLonLat(locationXy.value),
      zoom: 15, // 缩放级别
      minZoom: 0, // 最小缩放级别
      maxZoom: 18, // 最大缩放级别
      constrainResolution: true,
    }),

    controls: defaults().extend([
      // new FullScreen(), // 全屏
      // new MousePosition(), // 显示鼠标当前位置的经纬度
      // new ScaleLine()// 显示比例尺
    ]),
  });
  pointSource.value = new OlSourceVector();
  var vector_point = new OlLayerVector({
    source: pointSource.value,
    zIndex: 2,
  });
  openMap.value.addLayer(vector_point);
}
function taranslatePoint(item: any) {
  // 增加可移动点位元素
  let iconTranslate = new PointerTranslate({
    features: new Collection([item[0]]),
  });
  openMap.value.addInteraction(iconTranslate);

  console.log(iconTranslate, 365);
  // 为元素增加事件
  iconTranslate.on("translateend", (e) => {
    // e.stopPropagation();

    console.log(e.coordinate, 407);

    // let clickPoint = this.pointer.getGeometry().flatCoordinates;
    let clickPoint = e.coordinate;

    clickPoint = olProj.transform(clickPoint, "EPSG:3857", "EPSG:4326");

    console.log(clickPoint);
    resLoca.value = clickPoint;

    $get(
      ` http://222.79.63.193:8077/shenghuimap/geo/regeo?location=${clickPoint[0]},${clickPoint[1]}`,
      {}
    ).then((res: any) => {
      console.log(res, 418);
      // this.showAddList = true;

      // this.addressList = res.data.datas;
      // this.$emit("update:addressList", res.data.datas);
      let data = res.data.datas.addressComponent;
      console.log(data);
      locationArr.value.province = data.province;
      locationArr.value.city = data.city;
      locationArr.value.county = data.district;
      locationArr.value.address = data.township;
      locationArr.value.add = data.streetNumber.street;
      openMap.value.getView().setZoom(15);
    });
  });
}
function centerIcon(positionData: any) {
  //设置地图的地位图标
  let Location = olProj.transform(positionData, "EPSG:4326", "EPSG:3857");
  var point: any = new OlFeature(new OlGeomPoint(Location));
  point.setStyle(
    new Style({
      image: new Icon({
        src: require("../../assets/images/index/icon_16pt_接货定位@3x.png"),
        anchor: [0.5, 1],
      }),
    })
  );

  pointSource.value.clear();
  source.value.clear();
  pointSource.value.addFeature(point);
  // alert(typeof(point))
  point = [point];
  taranslatePoint(point);
  openMap.value.getView().setZoom(15);
}
function moveend() {
  openMap.value.on("moveend", async (e: any) => {
    console.log(879879878);
    // await this.$nextTick();
    // if (!this.isMove) return;
    // this.showAddList = false;
    console.log(e.frameState.viewState.center, 230);
    let cen = [
      e.frameState.viewState.center[0],
      e.frameState.viewState.center[1],
    ];

    let pos = olProj.transform(cen, "EPSG:3857", "EPSG:4326");
    centerIcon(pos);
    console.log(pos, 229);
    resLoca.value = pos;

    $get(
      ` http://222.79.63.193:8077/shenghuimap/geo/regeo?location=${pos[0]},${pos[1]}`,
      {}
    ).then((res: any) => {
      console.log(res, 227);
      // this.showAddList = true;
      let data = res.data.datas.addressComponent;
      console.log(data);
      locationArr.value.province = data.province;
      locationArr.value.city = data.city;
      locationArr.value.county = data.district;
      locationArr.value.address = data.township;
      locationArr.value.add = data.streetNumber.street;
      // this.$emit("update:hourseNumber",data.streetNumber.number)
      isMove.value = false;
      // this.addressList = res.data.datas;

      // this.openMap.getView().setZoom(15);
    });
  });

  document.addEventListener("click", (e: any) => {
    console.log(e.target.nodeName, 248);
    if (e.target.nodeName == "CANVAS") {
      isMove.value = true;
    }
  });
}
function beforeLeave(news: any, old: any) {
  setTimeout(() => {
    console.log(canMove.value, "钩子");
    setTimeout(() => {
      canMove.value = true;
    }, 200);
    console.log(canMove.value, "钩子");
    if (!canMove.value) {
      activeName.value = old;
    }
  }, 200);
}
async function goAdd(e: any) {
  isMove.value = false;
  console.log(e, "hhhhhhhhhhhh");
  locationArr.value.add = e.address;
  centerIcon(e.location.split(","));
  openMap.value
    .getView()
    .setCenter(
      olProj.transform(e.location.split(","), "EPSG:4326", "EPSG:3857")
    );
  openMap.value.render();
  if (!locationArr.value.province || locationArr.value.province == "") {
    let str = subStrAdd(e.district);
    str.add = e.address;
    console.log(str, "jieguo");
    // this.$emit("chooseaddreturn", str); //不选择省市区的情况下直接调用地图赋值省市区
    locationArr.value = str;
  }
}

function //分解地址中的行政区域
  subStrAdd(str: any) {
  var data: any = {};
  if (str.indexOf("上海市") > -1) {
    data["province"] = "上海市";
    data["city"] = "市辖区";
    if (str.indexOf("区") > -1) {
      data["county"] = str.split("区")[1] + "区";
      data["address"] = str.split("区")[2];
    }
    return data;
  }
  if (str.indexOf("北京市") > -1) {
    data["province"] = "北京市";
    data["city"] = "市辖区";
    if (str.indexOf("区") > -1) {
      data["county"] = str.split("区")[1] + "区";
      data["address"] = str.split("区")[2];
    }
    return data;
  }
  try {
    if (!str) {
      return data;
    }
    var province: any = "";
    var city: any = "";
    //判断是否有省
    if (str.match(/(\S*)省/)) {
      province = str.match(/(\S*)省/)[1] + "省";
    }
    data.province = province;
    //判断是否有省。
    if (province != "") {
      city = str.match(/省(\S*)市/)[1] + "市";
    } else {
      city = str.match(/(\S*)市/)[1] + "市";
    }

    data.city = city;
    if (str.indexOf("区") > 1) {
      var county: any = "";
      if (province != "") {
        county = str.match(/市(\S*)区/)[1] + "区";
      } else {
        county = str.match(/.+市(\S*)区/)[1] + "区";
      }
      data.county = county;
    }
    if (str.indexOf("县") > 1) {
      var county: any = "";
      if (province != "") {
        county = str.match(/市(\S*)县/)[1] + "县";
      } else {
        county = str.match(/.+市(\S*)县/)[1] + "县";
      }
      data.county = county;
    }
    if (str.indexOf("乡") > 1) {
      var matchstr: any = "";
      if (str.indexOf("县") > 1) {
        matchstr = /县(\S*)乡/;
      }
      //			else if (str.indexOf("区") > 1) {
      //				matchstr = /区(\S*)乡/;
      //			}
      else if (str.indexOf("市") > 1) {
        if (province != "") {
          matchstr = /市(\S*)乡/;
        } else {
          matchstr = /.+市(\S*)乡/;
        }
      }
      //    	town =  str.match(/县(\S*)乡/)[1]+"乡";
      let town: any = str.match(matchstr)[1] + "乡";
      data.town = town;
    }
    if (str.indexOf("镇") > 1) {
      var matchstr: any = "";
      if (str.indexOf("县") > 1) {
        matchstr = /县(\S*)镇/;
      }
      //			else if (str.indexOf("区") > 1) {
      //				matchstr = /区(\S*)镇/;
      //			}
      else if (str.indexOf("市") > 1) {
        if (province != "") {
          matchstr = /市(\S*)镇/;
        } else {
          matchstr = /.+市(\S*)镇/;
        }
      }
      //    	town =  str.match(/县(\S*)镇/)[1]+"镇";
      let town: any = str.match(matchstr)[1] + "镇";
      data.town = town;
    }
    if (str.indexOf("镇") > 1 && str.indexOf("村") > 1) {
      let village: any = str.match(/镇(\S*)村/)[1] + "村";
      data.village = village;
    }
    if (str.indexOf("乡") > 1 && str.indexOf("村") > 1) {
      let village: any = str.match(/乡(\S*)村/)[1] + "村";
      data.village = village;
    }
  } catch (e) {
    // alert(e)
  }
  data["address"] = str.replace(data.province + data.city + data.county, "");
  if (str.indexOf("街道") > -1) {
    data.address = data.address.substring(0, data.address.indexOf("街道") + 2);
  } else if (str.indexOf("镇") > -1) {
    data.address = data.address.substring(0, data.address.indexOf("镇") + 1);
  } else if (str.indexOf("园") > -1) {
    data.address = data.address.substring(0, data.address.indexOf("园") + 1);
  } else if (str.indexOf("乡") > -1) {
    data.address = data.address.substring(0, data.address.indexOf("园") + 1);
  } else if (str.indexOf("市") > -1) {
    data.address = data.address.substring(0, data.address.indexOf("市") + 1);
  } else if (str.indexOf("区") > -1) {
    data.address = data.address.substring(0, data.address.indexOf("区") + 1);
  }
  console.log(data);
  data["add"] = str.replace(
    data.province + data.city + data.county + data.address,
    ""
  );
  return data;
}

async function search() {
  jieliu(800, async () => {
    divs.value = true;
    result.value = await searchResult(address.value); //获取搜索的结果数据

    // console.log( JSON.parse(this.result.data),'sssssss');
    console.log(result.value[0]);

    //将地图定位到搜索结果第一条的位置
    centerIcon(result.value[0].location.split(","));
    openMap.value
      .getView()
      .setCenter(
        olProj.transform(
          result.value[0].location.split(","),
          "EPSG:4326",
          "EPSG:3857"
        )
      );
    openMap.value.render();
  });
}

async function handleClick() {
  console.log(activeName.value, 'activeName.value');
  let e = activeName.value;
  if (e == "1") {
    provinceList.value = await getsCity("1", null);
    locationArr.value.province = "";
    locationArr.value.city = "";
    locationArr.value.county = "";
    locationArr.value.address = "";
  } else if (e == "2") {
    if (locationArr.value.province == "") {
      canMove.value = false;
      //   this.$toast.fail("请先选择省份");
    } else {
      let arr: any = await getsCity("1", null);
      let code: any;
      arr.forEach((element: any) => {
        if (element.btaName == locationArr.value.province) {
          code = element.btaCode;
        }
      });
      provinceList.value = await getsCity("2", code);
      locationArr.value.city = "";
      locationArr.value.county = "";
      locationArr.value.address = "";
    }
  } else if (e == "3") {
    if (locationArr.value.city == "") {
      //   this.$toast.fail("请先选择城市");
      canMove.value = false;
    } else {
      let arr: any = await getsCity("1", '');
      let code: any;
      arr.forEach((element: any) => {
        if (element.btaName == locationArr.value.province) {
          code = element.btaCode;
        }
      });
      arr = await getsCity("2", code);
      arr.forEach((element: any) => {
        if (element.btaName == locationArr.value.city) {
          code = element.btaCode;
        }
      });
      provinceList.value = await getsCity("3", code);
      locationArr.value.county = "";
      locationArr.value.address = "";
    }
  } else if (e == "4") {
    if (locationArr.value.county == "") {
      //   this.$toast.fail("请先选择市区");
      canMove.value = false;
    } else {
      provinceList.value = await getsCity("4", '');
    }
  }
}
async function getsCity(i: string, j: any) {
  const res: any = await $post("/selfmachine-system/addressBook/list", {
    btaLevel: i,
    btaFcode: j,
  });
  if (res.data.code == 200) {
    console.log(res.data.data);

    // console.log(JSON.parse(data), "黄");
    // this.locationXy = String(JSON.parse(data).location).split(",");
    return res.data.data;
  } else {
    // this.$toast.fail(msg);
    return null;
  }
}
async function getsXy(params: any) {
  try {
    console.log(locationArr.value, "sdsd");
    console.log(params);
    const res: any = await $get("/selfmachine-system/branch/position", {
      address: params,
    });
    if (res.data.code == 200) {
      console.log(JSON.parse(res.data.data), "黄");
      locationXy.value = String(JSON.parse(res.data.data).location).split(",");
      return String(JSON.parse(res.data.data).location).split(",");
    } else {
      //   this.$toast.fail(res.data.msg);
      return null;
    }
  } catch (error) {
    // this.$toast.fail(error);
    return null;
  }
}
function jieliu(time: any, callback: any) {
  let end = Date.now();

  if (end - start.value >= time) {
    callback();
    start.value = end;
  } else {
  }
}
async function choose(i: any, j: any) {
  console.log(j);
  console.log(i);
  locationArr.value.add = "";
  if (i == "1") {
    locationArr.value.province = j.btaName;
    activeName.value = i;
    provinceList.value = await getsCity(i, j.btaCode);
    mapMove();
  } else if (i == "2") {
    locationArr.value.city = j.btaName;
    activeName.value = i;
    provinceList.value = await getsCity(i, j.btaCode);
    mapMove();
  } else if (i == "3") {
    locationArr.value.county = j.btaName;
    activeName.value = i;
    provinceList.value = await getsCity(i, j.btaCode);
    mapMove();
  } else {
    setTimeout(() => {
      show.value = false;
    }, 800);
    locationArr.value.address = j.btaName;
    mapMove();
  }
}
async function opens() {
  show.value = !show.value;
  if (show.value) {
    if (locationArr.value.province == "") {
      provinceList.value = await getsCity("1", null);
      activeName.value = "0";
    } else {
      if (locationArr.value.address != "") {
        activeName.value = "4";
        let arr: any = await getsCity("1", null);
        let code: any;
        arr.forEach((element: any) => {
          if (element.btaName == locationArr.value.province) {
            code = element.btaCode;
          }
        });
        arr = await getsCity("2", code);
        arr.forEach((element: any) => {
          if (element.btaName == locationArr.value.city) {
            code = element.btaCode;
          }
        });
        arr = await getsCity("3", code);
        arr.forEach((element: any) => {
          if (element.btaName == locationArr.value.county) {
            code = element.btaCode;
          }
        });
        provinceList.value = await getsCity("4", code);
      } else if (locationArr.value.county != "") {
        activeName.value = "4";
        let arr: any = await getsCity("1", null);
        let code: any;
        arr.forEach((element: any) => {
          if (element.btaName == locationArr.value.province) {
            code = element.btaCode;
          }
        });
        arr = await getsCity("2", code);
        arr.forEach((element: any) => {
          if (element.btaName == locationArr.value.city) {
            code = element.btaCode;
          }
        });
        arr = await getsCity("3", code);
        arr.forEach((element: any) => {
          if (element.btaName == locationArr.value.county) {
            code = element.btaCode;
          }
        });
        provinceList.value = await getsCity("4", code);
      } else if (locationArr.value.city != "") {
        activeName.value = "3";
        let arr: any = await getsCity("1", null);
        let code: any;
        arr.forEach((element: any) => {
          if (element.btaName == locationArr.value.province) {
            code = element.btaCode;
          }
        });
        arr = await getsCity("2", code);
        arr.forEach((element: any) => {
          if (element.btaName == locationArr.value.city) {
            code = element.btaCode;
          }
        });
        provinceList.value = await getsCity("3", code);
      } else if (locationArr.value.province != "") {
        activeName.value = "2";
        let arr: any = await getsCity("1", null);
        let code: any;
        arr.forEach((element: any) => {
          if (element.btaName == locationArr.value.province) {
            code = element.btaCode;
          }
        });
        provinceList.value = await getsCity("2", code);
      }
    }
  }
}
async function mapMove() {
  isMove.value = false;
  let l: any = await getsXy(address.value);
  centerIcon(locationXy.value);
  openMap.value
    .getView()
    .setCenter(olProj.transform(locationXy.value, "EPSG:4326", "EPSG:3857"));
  openMap.value.render();
}
async function again() {
  const test: any = await getsXy("");
  centerIcon(locationXy.value);
  mapMove();
}
function goBack() {
  closeBefore();
  //   this.$router.back();

  // this.$router.replace("/send/address/edit");
}
function closeBefore() {
  canMove.value = true;
  isMove.value = true;
  //   this.$emit("update:dialogShow", false);
}
function done() {
  console.log(locationArr.value, "this.locationArr");
  if (
    locationArr.value.province == "" ||
    locationArr.value.city == "" ||
    locationArr.value.county == "" ||
    locationArr.value.address == ""
  ) {
    // this.$toast.fail("请完善省市区街道信息");
    return;
  }
  sure();
}
function sure() {
  //   let add = locationArr.value.address + locationArr.value.add;
  //   this.$store.state.addressEditMessage = {
  //     add,
  //     local: resLoca.value,
  //     locationArr: locationArr.value,
  //   };
  //   this.$router.back();
  closeBefore();
}
async function searchResult(params: any) {
  const res: any = await $get("/selfmachine-system/index/getInputtips", {
    area: params,
  });
  if (res.data.code == 200) {
    console.log(JSON.parse(res.data.code), "黄");
    let arr: any = [];
    for (let i = 1; i < JSON.parse(res.data.data).tips.length; i++) {
      if (JSON.parse(res.data.data).tips[i].address.length != 0) {
        arr.push(JSON.parse(res.data.data).tips[i]);
      }
    }
    return arr;
  } else {
    // this.$toast.fail(res.data.msg);
    return null;
  }
}
</script>
<style>
.jh .ol-overlaycontainer-stopevent {
  display: none !important;
}

.jh .tabsd .el-tabs__header {
  margin: 0;
}
</style>
<style lang="scss" scoped>
// @import "xxx";
// @import url(xxx);
.ol-overlaycontainer-stopevent {
  display: none;
}

.fixdBox {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: white;
  padding: 20rpx;
}

.footadd {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 10rpx;
}

.resultGive {
  width: 100%;
  // height: 200px;
  background-color: #ffffff;
  border: 1rpx solid #dcdfe6;
  z-index: 999;

  position: absolute;

  .rows {
    display: flex;
    width: 100%;
    // background-color: red;
    height: 30rpx;
    align-items: center;
    border-bottom: 1rpx solid #dcdfe6;
  }
}

.startDestinationCostDialog {
  .border {
    border: 1rpx solid #dcdfe6;
  }
}

.textsss {
  display: flex;
  align-items: center;
  font-size: 14rpx;
  margin-left: 5rpx;
  white-space: nowrap;
  overflow: hidden;
}

.container {
  width: 350rpx;
  height: 72rpx;
  position: relative;
  display: flex;
  border: 1rpx solid #dcdfe6;
  border-radius: 4rpx;
  cursor: pointer;

  .text {
    padding: 0 5rpx;
  }

  .icon {
    position: absolute;
    right: 10rpx;
    top: 9rpx;
  }
}

.tabTag {
  width: 100%;
  height: auto;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-flow: wrap;

  .block {
    width: 25%;
    font-size: 16rpx;
    height: 50rpx;
    padding-left: 10rpx;
    border: 1rpx solid #dcdfe6;
    border-left: unset;
    display: flex;
    align-content: center;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
  }
}

.texs {
  width: 100%;
  height: 100rpx;
  justify-content: space-between;
  display: flex;
  background-color: white;
  align-items: center;

  .item {
    width: 50px;
    text-align: left;
    height: 100%;
    line-height: 50rpx;
    font-family: HarmonyOS_Sans_SC;
    font-size: 13rpx;
    font-weight: normal;
    letter-spacing: 0;

    /* Font/text-primary */
    color: #131414;
  }
}

.map-home {
  width: 100%;
  height: 100%;
}
</style>
